{% load static %}
<header class="py-1 pt-1 md:pt-2 sticky top-0 z-40 bg-slate-50 dark:bg-slate-900 creme:bg-creme">
    <div class="pr-2 pl-2 md:pl-4 md:pr-4 lg:pr-6 flex items-center justify-between">
        <a class="flex items-center gap-x-2" href="/">
            <div id="logo_div" class="flex items-center justify-center bg-primary h-8 w-8 rounded-full">
                <!-- bg-primary needed as profile image will flicker otherwise -->
                <img class="bg-primary rounded-lg h-6 w-6" src="{% static 'images/logo.svg' %}" alt="Logo"/>
            </div>
            <span class="hidden md:block text-xl font-bold text-primary">PdfDing</span>
        </a>
        {% if request.user.is_authenticated %}
        {% if page == 'pdf_overview' or page == 'user_overview' %}
        <form class="flex grow md:hidden px-4"
              method="GET" id="search_form_mobile"
              {% if page == 'pdf_overview' %}
              action="{% url 'pdf_overview_query' %}"
              {% elif page == 'user_overview' %}
              action="{% url 'user_overview_query' %}"
              {% endif %}
        >
            <input class="border h-10 rounded-sm! align-text-center focus:border-primary!
                          bg-slate-100 dark:bg-slate-800! creme:bg-creme-light-dark!
                          border-slate-400 dark:border-slate-600 creme:border-stone-400"
                    type="text" placeholder="Search"
                    id="search_input_mobile"
                    name="search"
                    @keyup.enter="document.getElementById('search_form_mobile').submit()"
            />
        </form>
        {% elif page == 'user_overview' %}
        {% endif %}
        <div id="open-user-dropdown" x-data="{ dropdownOpen: false }" class="relative flex flex-row items-center ">
            {% if page == 'pdf_overview' %}
            {% include 'includes/pdf_overview/header_extra.html' %}
            {% elif page == 'shared_pdf_overview' %}
            {% include 'includes/shared_overview/header_extra.html' %}
            {% elif page == 'user_overview' %}
            {% include 'includes/user_header_extra.html' %}
            {% elif page == 'pdf_highlight_overview' or page == 'pdf_comment_overview' or page == 'pdf_details_comments' or page == 'pdf_details_highlights'%}
            {% include 'includes/pdf_annotation_overview/header_extra.html' %}
            {% endif %}
            <a id="add_pdf" class="cursor-pointer rounded-sm py-1 md:px-2 md:-ml-1! group relative
                      hover:bg-slate-200 dark:hover:bg-slate-800 creme:hover:bg-creme-dark-light"
               href="{% url 'add_pdf' %}">
                <svg class="h-6 w-6 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- source: https://www.svgrepo.com/svg/471793/plus -->
                    <!-- license: CC0 License-->
                    <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="absolute pointer-events-none top-8 -left-1! mt-1 px-2 py-1 rounded-sm opacity-0
                             group-hover:opacity-100 group-hover:delay-350
                             text-slate-600 dark:text-slate-200 creme:text-stone-700
                             bg-slate-200 dark:bg-slate-800 creme:bg-creme-dark-light">Add
                </span>
            </a>
            <div @click="dropdownOpen = !dropdownOpen" @click.away="dropdownOpen = false" @keyup.escape.window="dropdownOpen = false"
               class="flex items-center justify-center px-2 ml-1 md:ml-2 rounded-full aspect-square cursor-pointer rounded-full! border-4
                      text-primary hover:bg-primary hover:text-slate-200 border-primary">
                <span class="text-lg font-extrabold!">{{ request.user.email.capitalize|first }}</span>
            </div>
            <div x-show="dropdownOpen" x-cloak
                 class="absolute top-10 right-0 shadow-sm rounded-lg w-52 p-2 z-20 border
                        bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light
                        border-slate-300 dark:border-slate-700 creme:border-creme-dark"
                x-transition:enter="duration-300 ease-out"
                x-transition:enter-start="opacity-0 scale-90"
                x-transition:enter-end="opacity-100 scale-100"
                >
                <div class="mx-2">
                    <div class="flex flex-row items-center gap-x-2">
                        <div class="flex items-center justify-center px-2 mt-1 rounded-full aspect-square cursor-default
                                    border-4 border-primary text-primary">
                            <span class="text-lg font-extrabold!">{{ request.user.email.capitalize|first }}</span>
                        </div>
                        <div class="flex flex-col truncate [&>span]:text-sm">
                            <span class="truncate">{{ request.user.email }}</span>
                            <span>User ID: {{ user.id }}</span>
                        </div>
                    </div>
                </div>
                <div class="mt-2 mb-1 border-b border-slate-300 dark:border-slate-600 creme:border-stone-400"></div>
                <div class="flex flex-col pt-1 [&>a]:py-1 [&>a]:px-2 [&>a]:flex [&>a]:items-center [&>a]:gap-x-1
                            [&>a]:cursor-pointer [&>a]:rounded-sm
                            [&>a]:hover:bg-slate-200 dark:[&>a]:hover:bg-slate-700 creme:[&>a]:hover:bg-creme-dark">
                    <a href="{% url 'account_settings' %}">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <!-- source: https://www.svgrepo.com/svg/304474/settings -->
                            <!-- license: PD License-->
                            <rect id="view-box" width="24" height="24" fill="currentColor" opacity="0"/>
                            <path id="Shape"
                                  d="M6.995,19.461a10.065,10.065,0,0,1-2.171-.9.756.756,0,0,1-.382-.7l.132-2.067a.151.151,0,0,0-.044-.116l-.707-.708a.149.149,0,0,0-.106-.043h-.01l-2.075.129-.047,0a.75.75,0,0,1-.654-.384,10.071,10.071,0,0,1-.9-2.176.755.755,0,0,1,.226-.766l1.559-1.376a.149.149,0,0,0,.05-.113V9.25a.151.151,0,0,0-.05-.113L.254,7.761a.754.754,0,0,1-.226-.766,10.115,10.115,
                                  0,0,1,.9-2.177.75.75,0,0,1,.654-.382h.047l2.075.129h.01a.153.153,0,0,0,.106-.044l.7-.7a.15.15,0,0,0,.043-.116L4.436,1.632a.754.754,0,0,1,.382-.7,10.115,10.115,0,0,1,2.177-.9.751.751,0,0,1,.766.226L9.137,1.813a.151.151,0,0,0,.113.05h.988a.149.149,0,0,0,.113-.05L11.728.254a.751.751,0,0,1,.766-.226,10.071,10.071,0,0,1,2.176.9.753.753,0,0,1,.383.7l-.129,
                                  2.075a.151.151,0,0,0,.043.116l.7.7a.155.155,0,0,0,.107.044h.009l2.075-.129H17.9a.752.752,0,0,1,.654.382,10.07,10.07,0,0,1,.9,2.177.753.753,0,0,1-.226.766L17.676,9.137a.152.152,0,0,0-.051.113v.988a.152.152,0,0,0,.051.113l1.559,1.376a.753.753,0,0,1,.226.766,10.026,10.026,0,0,1-.9,2.176.751.751,0,0,1-.654.384l-.047,0-2.075-.129h-.01a.149.149,
                                  0,0,0-.106.043l-.7.7a.154.154,0,0,0-.043.116l.129,2.075a.744.744,0,0,1-.383.7,10.011,10.011,0,0,1-2.171.9.746.746,0,0,1-.767-.226l-1.371-1.557a.149.149,0,0,0-.113-.051h-1a.152.152,0,0,0-.113.051L7.761,19.235a.751.751,0,0,1-.766.226ZM4.883,13.907l.708.707a1.649,1.649,0,0,1,.48,1.273l-.1,1.582a8.373,8.373,0,0,0,.988.409l1.055-1.194a1.652,1.652,0,0,1,
                                  1.238-.558h1a1.649,1.649,0,0,1,1.238.56l1.049,1.191a8.413,8.413,0,0,0,.989-.41l-.1-1.59a1.653,1.653,0,0,1,.481-1.27l.7-.7a1.664,1.664,0,0,1,1.167-.483l.1,0,1.59.1a8.376,8.376,0,0,0,.412-.994l-1.194-1.055a1.652,1.652,0,0,1-.558-1.238V9.25a1.652,1.652,0,0,1,.558-1.238l1.194-1.055a8.274,8.274,0,0,0-.412-.994l-1.59.1c-.033,0-.068,0-.1,0a1.642,1.642,0,0,
                                  1-1.169-.484l-.7-.7a1.65,1.65,0,0,1-.481-1.269l.1-1.59a8.748,8.748,0,0,0-.994-.413l-1.055,1.2a1.652,1.652,0,0,1-1.238.558H9.25a1.652,1.652,0,0,1-1.238-.558L6.958,1.61a8.8,8.8,0,0,0-.994.413l.1,1.59a1.65,1.65,0,0,1-.481,1.269l-.7.7a1.638,1.638,0,0,1-1.168.484c-.033,0-.067,0-.1,0l-1.59-.1a8.748,8.748,0,0,0-.413.994l1.2,1.055A1.652,1.652,0,0,1,3.363,
                                  9.25v.988a1.652,1.652,0,0,1-.558,1.238l-1.2,1.055a8.666,8.666,0,0,0,.413.994l1.59-.1.1,0A1.638,1.638,0,0,1,4.883,13.907Zm.106-4.168a4.75,4.75,0,1,1,4.75,4.75A4.756,4.756,0,0,1,4.989,9.739Zm1.5,0a3.25,3.25,0,1,0,3.25-3.25A3.254,3.254,0,0,0,6.489,9.739Z" transform="translate(2.261 2.261)" fill="currentColor"/>
                        </svg>
                        Settings
                    </a>
                    {% if request.user.is_superuser and request.user.is_staff %}
                    <a href="{% url 'user_overview' %}">
                        <svg class="w-5 h-5" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- source: https://www.svgrepo.com/svg/535465/key-skeleton -->
                            <!-- license: PD License-->
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 9C12.9853 9 15 6.98528 15 4.5C15 2.01472 12.9853 0 10.5 0C8.01475 0 6.00003 2.01472 6.00003 4.5C6.00003 5.38054 6.25294 6.20201 6.69008 6.89574L0.585815 13L3.58292 15.9971L4.99714 14.5829L3.41424 13L5.00003 11.4142L6.58292 12.9971L7.99714 11.5829L6.41424 10L8.10429 8.30995C8.79801 8.74709 9.61949 9 10.5 9ZM10.5 7C11.8807 7 13 5.88071 13 4.5C13 3.11929 11.8807 2 10.5 2C9.11932 2 8.00003 3.11929 8.00003 4.5C8.00003 5.88071 9.11932 7 10.5 7Z" fill="currentColor"/>
                        </svg>
                        Admin
                    </a>
                    {% endif %}
                    <a href="{% url 'support' %}">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- source: https://www.svgrepo.com/svg/471503/heart -->
                            <!-- license: CC0 License-->
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.89982 14.6651 9.84977 19.1041 11.4721 20.5408C11.6536 20.7016 11.7444 20.7819 11.8502 20.8135C11.9426 20.8411 12.0437 20.8411 12.1361 20.8135C12.2419 20.7819 12.3327 20.7016 12.5142 20.5408C14.1365 19.1041 19.0865 14.6651 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Support
                    </a>
                    <div class="my-1 border-b border-slate-300 dark:border-slate-600 creme:border-stone-400"></div>
                    <a href="{% url 'account_logout' %}">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- source: https://www.svgrepo.com/svg/471638/log-out-01 -->
                            <!-- license: CC0 License-->
                            <path d="M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Sign out
                    </a>
                </div>
            </div>
        </div>
        {% else %}
        <div class="flex flex-row items-center font-semibold gap-x-4 [&>a]:py-1 [&>a]:px-3 [&>a]:text-primary [&>a]:hover:text-secondary">
            <a href="{% url 'login' %}">Sign in</a>
            {% if not SOCIALACCOUNT_ONLY and not SIGNUP_CLOSED %}
            <a class="rounded-md border-1 border-primary hover:border-secondary" href="{% url 'signup' %}">Sign up</a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</header>
